<template>
	<view class="xiding">
		<view class="search_box">
			<image src="../../static/s1.png" class="goback" @click="gobackClick" mode="widthFix"></image>
			<text class="topicText">我要祈愿</text>
		</view>
		<view class="interval">
			<!-- 祈愿 内容-->
			<view class="pray_content">
				<text style="width: 190rpx;">祈愿内容：</text>
				<textarea value="" v-model="content" placeholder="请填写祈愿内容~" class="textArea" />
				<text class="numFoll">0/100</text>
			</view>
			<!-- 还愿 -->
			<view class="redeem">
				<text style="width: 190rpx;">是否还愿：</text>
				<view class="redeemYes">
					<view class="redeemText" v-for="(title,index) in titleList" :key="index" :class="curren== title.index ? '':'active' " @click="currenClick(title.index)">{{title.title}}</view>
				</view>
			</view>
			<!-- 愿望达成捐赠福币 -->
			<view class="conclude">
				<text>愿望达成后，我要向佛祖捐赠香火：</text>
				<input type="number" value="" v-model="money" class="concludeInp" placeholder="" />
				<text>福币</text>
			</view>
			<!-- 还愿日期 -->
			<view class="timer" v-show="curren == 1">
				<text style="width: 180rpx;">还愿日期：</text>
				<view class="timerInp" @click="timerClick">
					 	<gpp-date-picker @onCancel="onCancel" @onConfirm="onConfirm" :startDate="startDate" :endDate="endDate" :defaultValue="pickerDate">
					 	    {{pickerDate}}
					 	</gpp-date-picker>
				</view>
			</view>
			<!-- 您还未填写祈愿内容 -->
			 <view class="filled" v-if="flag">您还未填写祈愿内容！</view>
			<!-- 创建祈愿按钮 -->
			<view class="" style="display: flex; justify-content: center;padding-top: 250rpx;">
				<view class="foundBtn" @click="sucFullClcik">创建</view>
			</view>
		</view>
		
		
		<!-- 退出还愿弹窗 -->
		<uni-popup ref="popup" type="center">
			<view class="popCenter">
				<text style="padding: 40rpx 0;">您还未祈愿成功，是否退出？</text>
				<view class="popBtn">
					<text class="cancel" @click="showClcik">取消</text>
					<text class="cancel"  @click="quitClcik" style="border: 0;color: #333333;">确定</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
		import uniPopup from '@/components/uni-popup/uni-popup.vue'
		import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
		import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
		import gppDatePicker from "@/components/gpp-datePicker/gpp-datePicker.vue"
		export default {
		data() {
			return {
				titleList:[
					{ index:2,title:'否' },
					{ index:1,title:'是' }
				],
				curren:2,
				startDate: "2018-05-02",
				endDate: "2022-09-20",
				pickerDate: '2021-9-1',
				flag:false,
				token: '',
				lifoID: '',
				content: '', // 祈愿内容
				money: '', // 祈愿金额
				rules : {
					content : {
						rule: /\S/,
						msg: '请输入祈愿内容'
					},
					money : {
						rule: /\S/,
						msg: '请输入捐赠金额'
					}
				},
			}
		},
		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
			gppDatePicker
		
		},
		onLoad(options) {
			this.lifoID = options.id
			this.token = uni.getStorageSync('token')
		},
		methods: {
			currenClick(index){
				console.log(index)
				this.curren=index
				// if( index==0 ){
				// 	this.$refs.popup.open()
				// }
			},
			//关闭弹窗
			showClcik(){
				this.$refs.popup.close()
			},
			//日期
			confirm(date){
			     this.show=false;
			     this.birth = date;
			},
			
			onCancel(e){
			      console.log(e);
			},
			onConfirm(e){
				  this.pickerDate = e.dateValue;
				  console.log(this.pickerDate)
			},
			//返回礼佛首页
			gobackClick(){
				uni.navigateBack({
					delta:1 
				})
			},
			//判断验证
			validate(key){
				let bool = true;
				if(!this.rules[key].rule.test(this[key])){
					uni.showToast({
						title: this.rules[key].msg,
						icon: 'none'
					})
					// 取反
					bool = false;
					return false;
				}
				return bool;
			},
	
			
			//祈愿提交成功
			async sucFullClcik(){
				let that = this
				if (!that.validate('content')) return
				if (!that.validate('money')) return
				
				const res = await that.$myRequest({
					url: 'user/addBuddhistPray',
					method: 'POST',
					header: {
						'token': that.token
					},
					data: {
						id: that.lifoID,
						content: that.content,
						money: that.money,
						is_wish_back: that.curren,
						wish_back_date: that.pickerDate
					}
				})
				console.log(res)
				if (res.data.code == 1){
					let that = this
				    that.ordercode = res.data.msg
					const datas = await this.$myRequest({
						url: 'pay/wx_pay',
						method:"POST",
						header: {
							// 'Authorization' : that.bearerToken
							'token':  that.token
						},
						data: {
							order_sn: that.ordercode
						}
					})
					console.log(datas)
					if(datas.data.code == 1) {
						// alert(11111)
						WeixinJSBridge.invoke(
						   'getBrandWCPayRequest', {
						      "appId":datas.data.data.appId,//公众号名称，由商户传入     
						      "timeStamp":datas.data.data.timeStamp,//时间戳，自1970年以来的秒数     
						      "nonceStr":datas.data.data.nonceStr,//随机串 
						      "package":datas.data.data.package,
						      "signType":datas.data.data.signType,//微信签名方式：
						      "paySign":datas.data.data.paySign//微信签名
						   },
						function(res){
							// alert(JSON.stringify(res))
							// alert(1111)
						    if(res.err_msg == "get_brand_wcpay_request:ok" ){
								// 使用以上方式判断前端返回,微信团队郑重提示：
						        //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠
								// alert(out_trade_no)
								uni.request({
									url: "https://www.123qifu.com/api/pay/weixin_getList",
									method:"POST",
									header: {
										// "Authorization" : that.bearerToken
										'token':  that.token
									},
									data:{
										order_sn:that.ordercode
									},
									success: (res) => {
										if(res.data.code == 1) {
											uni.showToast({
												title:'创建成功',
												icon:'none'
											})
											setTimeout(()=>{
												uni.navigateBack({
													delta: 1
												})
											},1500)
										}
									}
								})	
						    }
						}
						);
						
				    }
				}
				
			},
			//退出祈愿
			quitClcik(){
				uni.navigateTo({
					url:'Bodhisattva'
				})
			}
		}
	}
</script>

<style lang="scss">
	
	
.pray_content{
	display: flex;
	width: 100%;
	box-sizing: border-box;
	padding: 25rpx;
	font-size: 30rpx;
	color: #333;
	position: relative;
	.textArea{
		background-color: #fff;
		border: 1rpx solid #CECECE;
		padding: 10rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #333;
		border-radius: 10rpx;
	}
	.numFoll{
		position: absolute;
		bottom: 30rpx;
		right: 50rpx;
		font-size: 26rpx;
		color: #888888;
	}
}
.redeem{
		display: flex;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
		padding: 12rpx 25rpx;
	//	background-color: pink;
		font-size: 30rpx;
		color: #333;
		.redeemYes{
			display: flex;
			width: 90%;
			margin-left: 10rpx;
			background-color: #fff;
		}
		.active{
			background-color: #CECECE !important;
		}
		.redeemText{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 148rpx;
			height: 52rpx;
			background-color: #C52B2E;
			border-radius: 30rpx;
			color: #fff;
			font-size: 26rpx;
			margin: 0 30rpx 0 0;
			
		}
}
.popCenter{
	display: flex;
	align-items: center;
	flex-direction: column;
	width: 546rpx;
	padding: 10rpx 0 0;
	background-color: #fff;
	font-size: 30rpx;
	color: #333333;
	border-radius: 10rpx;
	.popBtn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100rpx;
		//background-color: pink;
		border-top: 1rpx solid #ccc;
		border-radius: 0 0 10rpx 10rpx;
	
		.cancel {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			color: #888888;
			width: 50%;
			height: 100%;
			border-right: 1rpx solid #ccc;
			letter-spacing: 2rpx;
		}
	}
}
.timer{
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	padding: 0rpx 25rpx;
	font-size: 30rpx;
	color: #333;
	.timerInp{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 276rpx;
		height: 60rpx;
		border: 1rpx solid #ccc;
		border-radius: 10rpx;
		//color: #C52B2E;
		font-weight: 600;
		
	}
	
}
.conclude{
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	padding: 25rpx;
	font-size: 30rpx;
	color: #333;
	.concludeInp{
		width: 120rpx;
		height: 64rpx;
		border: 1rpx solid #ccc;
		margin: 0 15rpx 0 5rpx;
		//padding-left: 5rpx;
		box-sizing: border-box;
		text-align: center;
		color: #C52B2E;
	}
}
.foundBtn{
	
	// transform: translate(50%,50%);
	// bottom: 150rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	letter-spacing: 4rpx;
	width: 90%;
	height: 83rpx;
	background-color: #C52B2E;
	border-radius: 40rpx;
	color: #fff;
	font-size: 32rpx;
	font-weight: 600;
}
.filled{
	position: fixed;
	left: 50%;
	transform: translate(-50%,-50%);
	bottom: 150rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	letter-spacing: 4rpx;
	width: 90%;
	height: 83rpx;
	//background-color: #C52B2E;
	border-radius: 40rpx;
	border: 1rpx solid #707070;
	color: #333;
	font-size: 28rpx;
	// /font-weight: 600;
}
</style>
